import React, {
    Component
} from "react"

import {
    StyleSheet,
    View,
    Text,
    Image,
    ScrollView
} from 'react-native'

import {
    connect
} from "react-redux"

import Moment from 'moment';
import constant from './constant';
import ZanView from '../../com/ZanView';

export default class Home extends Component {
    render() {

        // let volStr = this.state.homeData.strHpTitle;
        // let imgUrl = this.state.homeData.strOriginalImgUrl;

        // let nameAuthor = this.state.homeData.strAuthor;
        // let array = nameAuthor.split('&');
        // var name, author;
        // if (array.length == 2) {
        //     name = array[0];
        //     author = array[1];
        // }

        // let dateYear = Moment().format('YYYY');
        // let dateMonth = Moment().format('MMM');
        // let dateDay = Moment().format('DD');

        // let content = this.state.homeData.strContent;
        // let contentFontSize = 14.0;
        // let contentLineNum = content.length / ((Constants.window.screenWidth * 0.7 - 40) / contentFontSize) + 1;
        // let contentHeight = contentLineNum * (contentFontSize + 5) + 10;

        // let zanNum = this.state.homeData.strPn;

        let volStr = "vol.6733";
        let imgUrl = "http://pic65.nipic.com/file/20150419/8684504_205612692746_2.jpg";

        let nameAuthor = "呵呵哒&青虹";
        let array = nameAuthor.split('&');
        var name, author;
        if (array.length == 2) {
            name = array[0];
            author = array[1];
        }

        let dateYear = Moment().format('YYYY');
        let dateMonth = Moment().format('MMM');
        let dateDay = Moment().format('DD');

        let content = "度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算";
        let contentFontSize = 14.0;
        let contentLineNum = content.length / ((constant.window.screenWidth * 0.7 - 40) / contentFontSize) + 1;
        let contentHeight = contentLineNum * (contentFontSize + 5) + 10;

        let zanNum = 1222;

        return (
            <View style={styles.home}>
                <ScrollView style={styles.scrollView}
                            showsVerticalScrollIndicator={false}
                            showsHorizontalScrollIndicator={false}>
                    <Text style={styles.volText}>{volStr}</Text>
                    <Image source={{uri: imgUrl}} style={styles.image}/>
                    <Text style={[styles.nameAuthor, {marginTop: 15}]}>{name}</Text>
                    <Text style={styles.nameAuthor}>{author}</Text>
                    <View style={{height: contentHeight, flexDirection: 'row', marginTop: 30}}>
                        <View style={styles.date}>
                            <Text style={{fontSize: 26, color: 'rgb(47,177,253)'}}>{dateDay}</Text>
                            <Text style={{fontSize: 10, marginTop: 5}}>{dateMonth + ' , ' + dateYear}</Text>
                        </View>
                        <View style={styles.content}>
                            <Text numberOfLines={contentLineNum}
                                  style={{marginHorizontal: 10, lineHeight: contentFontSize+5}}>
                                {content}
                            </Text>
                        </View>
                    </View>
                    <View style={{height: 50, marginTop: 40, justifyContent: 'center', alignItems: 'flex-end'}}>
                        <ZanView zanNum={zanNum} style={styles.zanView}/>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    home: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 64,
        paddingBottom: 49
    },
    scrollView: {
        width: constant.window.screenWidth,
        height: constant.window.screenHeight - 64 - 49
    },
    volText: {
        paddingLeft: 10,
        paddingTop: 10,
        fontSize: 14
    },
    image: {
        width: constant.window.screenWidth - 10,
        height: 260,
        justifyContent: 'center',
        marginLeft: 5,
        marginTop: 20
    },
    nameAuthor: {
        justifyContent: 'flex-end',
        textAlign: 'right',
        fontSize: 13,
        marginRight: 5,
        marginTop: 5
    },
    date: {
        width: constant.window.screenWidth * 0.3,
        justifyContent: 'center',
        alignItems: 'center'
    },
    content: {
        flex: 1,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgb(42,194,244)',
        marginRight: 20
    },
    zanView: {
        height: 36,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'gray',
        borderRadius: 18,
        borderWidth: 0.5,
        right: -18
    }
});

const mapStateToProps = () => {
    return {
    }
};
